<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools 1.3 Documentation - Element/Element.Forms</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
      <h4 class="menu-item"><a href="#Element">Element</a></h4>
      <div class="menu-item"><a href="#Element:tidy">tidy</a></div>
      <div class="menu-item"><a href="#Element:getTextInRange">getTextInRange</a></div>
      <div class="menu-item"><a href="#Element:getSelectedText">getSelectedText</a></div>
      <div class="menu-item"><a href="#Element:getSelectionStart">getSelectionStart</a></div>
      <div class="menu-item"><a href="#Element:getSelectionEnd">getSelectionEnd</a></div>
      <div class="menu-item"><a href="#Element:getSelectedRange">getSelectedRange</a></div>
      <div class="menu-item"><a href="#Element:setCaretPosition">setCaretPosition</a></div>
      <div class="menu-item"><a href="#Element:getCaretPosition">getCaretPosition</a></div>
      <div class="menu-item"><a href="#Element:selectRange">selectRange</a></div>
      <div class="menu-item"><a href="#Element:insertAtCursor">insertAtCursor</a></div>
      <div class="menu-item"><a href="#"></a></div>
    </div>
    <div class="l-border r-border span-15 content">
      <h1 id="Element"><a href="#Element">Type: Element</a></h1>
      <p class="description">Extends the <a href="../../../docs/core/Element/Element.html">Element</a> Type to include methods useful in managing inputs.</p>
      <h3>Tutorial/Demo</h3>
      <ul>
        <li><a href="http://www.clientcide.com/wiki/cnet-libraries/04-element/00-element.forms">Online Tutorial/Demo</a></li>
      </ul>
      <h2 id="Element:tidy"><a href="#Element:tidy">Element Method: tidy</a></h2>
      <p class="description">Uses <a href="../../../docs/more/Types/String.Extras.html#String:tidy">String:tidy</a> to clean up common special characters with their ASCII counterparts (smart quotes, elipse characters, stuff from MS Word, etc.).</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">tidy</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em>) This Element.</li>
      </ul>
      <h2 id="Element:getTextInRange"><a href="#Element:getTextInRange">Element Method: getTextInRange</a></h2>
      <p class="description">Returns the text of an input within a range.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">getTextInRange</span><span class="br0">(</span>start, end<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>start - (<em>integer</em>) beginning select position</li>
        <li>end - (<em>integer</em>) end position</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>string</em>) the text in the specified range</li>
      </ul>
      <h3>Notes</h3>
      <ul>
        <li>If the range specified is out of bounds (for instance, if the text is "123" and you query for the range 2-10) the text that is found within the bounds is returned. If no text falls within the bounds, an empty string is returned.</li>
      </ul>
      <h2 id="Element:getSelectedText"><a href="#Element:getSelectedText">Element Method: getSelectedText</a></h2>
      <p class="description">Get the text selected in an input, returns a range (see <a href="#Element:getTextInRange">Element:getTextInRange</a>).</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">getSelectedText</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>string</em>) The text that is selected</li>
      </ul>
      <h3>Notes</h3>
      <ul>
        <li>If no text is selected, an empty string is returned.</li>
      </ul>
      <h2 id="Element:getSelectionStart"><a href="#Element:getSelectionStart">Element Method: getSelectionStart</a></h2>
      <p class="description">Returns the index of start of the selected text.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">getSelectionStart</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>number</em>) The numerical index of the start of the selection.</li>
      </ul>
      <h2 id="Element:getSelectionEnd"><a href="#Element:getSelectionEnd">Element Method: getSelectionEnd</a></h2>
      <p class="description">Returns the index of end of the selected text.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">getSelectionEnd</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>number</em>) The numerical index of the end of the selection.</li>
      </ul>
      <h3>Notes</h3>
      <ul>
        <li>If there is no selection, this value will be equal to <a href="#Element:getSelectionStart">Element:getSelectionStart</a> </li>
      </ul>
      <h2 id="Element:getSelectedRange"><a href="#Element:getSelectedRange">Element Method: getSelectedRange</a></h2>
      <p class="description">Returns the range of what is selected within the element.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">getSelectedRange</span><span class="br0">(</span><span class="br0">)</span>;
</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>object</em>) start and end values (each an <em>integer</em>).</li>
      </ul>
      <h3>Example return</h3>
      <pre class="javascript"><span class="br0">{</span>start: <span class="nu0">2</span>, end: <span class="nu0">12</span><span class="br0">}</span>

</pre>
      <h2 id="Element:setCaretPosition"><a href="#Element:setCaretPosition">Element Method: setCaretPosition</a></h2>
      <p class="description">Sets the caret at the given position.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">setCaretPosition</span><span class="br0">(</span>pos<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>pos - (<em>integer</em>) the location to place the caret OR "end" to place it at the end.</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em>) This Element.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">setCaretPosition</span><span class="br0">(</span><span class="nu0">3</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">setCaretPosition</span><span class="br0">(</span><span class="st0">"end"</span><span class="br0">)</span>;

</pre>
      <h2 id="Element:getCaretPosition"><a href="#Element:getCaretPosition">Element Method: getCaretPosition</a></h2>
      <p class="description">Returns the caret position.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">getCaretPosition</span><span class="br0">(</span><span class="br0">)</span>;

</pre>
      <h3>Returns</h3>
      <ul>
        <li>(<em>integer</em>) The caret position.</li>
      </ul>
      <h2 id="Element:selectRange"><a href="#Element:selectRange">Element Method: selectRange</a></h2>
      <p class="description">Selects text within a given range.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">selectRange</span><span class="br0">(</span>start, end<span class="br0">)</span>;
</pre>
      <h3>Arguments</h3>
      <ol>
        <li>start - (<em>integer</em>) starting integer</li>
        <li>end - (<em>integer</em>) ending integer</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em>) This Element.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">selectRange</span><span class="br0">(</span><span class="nu0">2</span>, <span class="nu0">4</span><span class="br0">)</span>;
&nbsp;

&lt;input id=<span class="st0">"test"</span> value=<span class="st0">"012345"</span> /&gt;
$<span class="br0">(</span><span class="st0">'test'</span><span class="br0">)</span>.<span class="me1">selectRange</span><span class="br0">(</span><span class="nu0">2</span>, <span class="nu0">4</span><span class="br0">)</span>; <span class="co1">//selects "23"</span>

</pre>
      <h2 id="Element:insertAtCursor"><a href="#Element:insertAtCursor">Element Method: insertAtCursor</a></h2>
      <p class="description">Inserts a value at the cursor location; if text is selected, it replaces this text.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">insertAtCursor</span><span class="br0">(</span>value<span class="br0">[</span>, selectText<span class="br0">]</span><span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>value - (<em>string</em>) value to insert.</li>
        <li>selectText - (<em>boolean</em>) selects the text after it's been inserted</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em>) This Element.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">insertAtCursor</span><span class="br0">(</span><span class="st0">"&lt;br /&gt;"</span><span class="br0">)</span>;
$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">insertAtCursor</span><span class="br0">(</span><span class="st0">"type something here"</span>, <span class="kw2">true</span><span class="br0">)</span>;

</pre>
      <h2><a href="#">Element Method: insertAroundCursor</a></h2>
      <p class="description">Inserts two strings around the selected text.</p>
      <h3>Syntax</h3>
      <pre class="javascript">$<span class="br0">(</span><span class="st0">'myInput'</span><span class="br0">)</span>.<span class="me1">insertAroundCursor</span><span class="br0">(</span>options<span class="br0">)</span>;

</pre>
      <h3>Arguments</h3>
      <ol>
        <li>options - (<em>object</em>) key/value set of options.</li>
      </ol>
      <h3>Options</h3>
      <ol>
        <li>before - (<em>string</em>) the prefix to insert before the selected text</li>
        <li>after - (<em>string</em>) the suffix to insert after the selected text</li>
        <li>defaultMiddle - (<em>string</em>) value to insert between the prefix and the suffix if no text was selected (defaults to "SOMETHING HERE")</li>
      </ol>
      <h3>Returns</h3>
      <ul>
        <li>(<em>element</em>) This Element.</li>
      </ul>
      <h3>Example</h3>
      <pre class="javascript">&lt;input id=<span class="st0">"test"</span> value=<span class="st0">"ninjas are the most dangerous thing in the world"</span> /&gt;
<span class="co1">//let's assume that the user selects the word "ninjas"</span>
$<span class="br0">(</span><span class="st0">'test'</span><span class="br0">)</span>.<span class="me1">insertAroundCursor</span><span class="br0">(</span><span class="br0">{</span>before: <span class="st0">"&lt;"</span>, after: <span class="st0">"&gt;"</span>, defaultMiddle: <span class="st0">"tag-name"</span><span class="br0">}</span><span class="br0">)</span>;

<span class="co1">//value is now:</span>
<span class="co1">//&lt;ninjas&gt; are the most dangerous thing in the world</span>
</pre>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
